Глава 6

Первая страница с использованием CFML

Вы можете создавать CFML-страницы при помощи любого HTML-редактора или даже обычного Notepad (Блокнота). Однако рекомендуем использовать ColdFusion Studio. ColdFusion Markup Language (CFML) — это язык разметки, синтаксис которого подобен HTML. Поэтому для Web-программистов CFML может являться интуитивно понятным средством разработки.

В отличие от HTML, который определяет отображение и форматирование элементов на компьютере клиента, CFML опознает определенные действия, выполняемые сервером ColdFusion. Открытый и расширяемый язык CFML предоставляет более 75 серверных тегов, 247 функций и 1000 компонентов третьих фирм. Кроме того, ColdFusion легко дополняется с помощью приложений на Java и C++.

Пишем код CFML-страницы

Рассмотрим пример создания страницы с использованием CFML. Итак:

  1. Откройте ColdFusion Studio.
  2. Выберите команду File | New (Файл | Создать) и определите новый документ как Default Template (Шаблон по умолчанию).
  3. Отредактируйте новый файл так, чтобы в результате у вас получился код, представленный в листинге 6.1.

Листинг 6.1. Текст нового файла

<HTML> <HEAD>

<TITLE>Welcome</TITLE> </HEAD> <BODY>

<STRONG>Welcome ! </STRONG>

< ! --- Установка переменной FirstName --- >

<CFSET FirstName="Anjuta">

<! --- Вывод на экран --- >

<CFOUTPUT>

Dear Ms. #FirstNamett, thank you for your interest in CFML.

</CFOUTPUT>

</BODY>

</HTML>

Сохранение CFML-страниц

ColdFusion поддерживает следующие расширения: cfm и cfnil. По умолчанию ColdFusion Studio сохраняет новые файлы с расширением cfm.

Для сохранения нашего примера выполните следующие действия:

  1. Выберите команду File | Save (Файл | Сохранить).
  2. Сохраните свою страницу с именем Welcome. cfm в корневом каталоге Web-сервера.

Например, если в корневом каталоге Web-сервера определен каталог ту-арр, тогда для:

Просмотр CFML-страниц

Для просмотра страницы необходимо открыть Web-браузер и в поле URL-адреса набрать http://127.0.0.1/my-app/welcome.cfm, где 127. 0.0.1 - адрес локальной машины — localhost.

Сравните по табл. 6.1 код, созданный первоначально, и код, возвращаемый Web-сервером.

Таблица 6. 1. Первоначальный и возвращенный Web-сервером коды

Первоисточник, созданный в ColdFusion

Просмотр в виде HTML на компьютере клиента

<HTML> <HEAD> <TITLE>Welcome</TITLE>

<HTML> <HEAD> <TITLE>Welcome</TITLE>

</HEAD>

</HEAD>

<BODY>

<BODY>

<STRONG>Welcome ! </STRONG>

<STRONG>Welcome ! </STRONG>

< ! --- Установка переменной


FirstName --- >


<CFSET FirstName="Anjuta">


< ! --- Вывод на экран -.-->


<CFOUTPUT>


Dear Ms. IFirstNamett, thank you for your interest in CFML.

Dear Ms. Anjuta, thank you for your interest in CFML.

</CFOUTPUT>


</BODY>

</BODY>

</HTML>

</HTML>

Также просмотр CFML-страниц можно осуществлять непосредственно из ColdFusion Studio, предварительно произведя следующие установки:

  1. Выберите команду Options | Settings (Настройка | Параметры) и из левого списка выделите раздел Browse (Обзор).
  2. Нажмите кнопку Development Mappings (Подготовка псевдонимов), расположенную в центре окна.
  3. На вкладке Mappings (Псевдонимы) нажмите кнопку Add (Добавить) и в открывшемся диалоговом окне укажите параметры: Studio Path (Месторасположение Web-сервера с точки зрения Studio), CF Server Path (Месторасположение Web-сервера с точки зрения CF Server) и Browser Path (Виртуальный путь при просмотре с использованием браузера), в зависимости от Web-сервера. При размещении CF Studio и CF Server на одной машине, значения полей Studio Path и CF Server Path идентичны.
  4. Нажмите кнопку ОК.
  5. Далее подтвердите свой выбор щелчком по кнопке ОК уже в окне Remote Development Settings (Настройка удаленных псевдонимов) .

Обратите внимание, что таким образом можно создавать сразу несколько логических псевдонимов (mappings) для ваших Web-разработок.

В дальнейшем для просмотра результата написанного нами кода остается воспользоваться панелью режима работы с документами и перейти из режима редактирования Edit (Редактор) в режим просмотра Browse (Просмотр).

Анализ кода

В рассматриваемом достаточно простом примере мы используем тег <CFSET> для определения переменной FirstName. После чего внутри границ тега <CFOUTPUT> помещаем текст, включающий значение данной переменной. Для вывода значения переменной заключаем ее между символами #.

Таблица 6.2. Описание кода страницы welcome.cfm

Код

Описание

<! ---- Установка переменной FirstName ---- >

<CFSET FirstName="Anjuta">

<! ---- Вывод на экран ---- >

<CFOUTPUT>

Dear Ms. #FirstName#, thank you for your interest in CFML.

</CFOUTPUT>

CFML-комментарий, который не отображается в HTML-странице

Создаем переменную с именем FirstName и задаем значение, равное "Anjuta"

CFML-комментарий, который не отображается в HTML-странице

Выводим на экран содержимое тега <CFOUTPUT>, в нашем случае текст "Dear Ms." ("Уважаемая"), затем помещаем значение переменной FirstName и далее фразу ", thank you for your interest in CFML. " ("спасибо за оказанное внимание к CFML")

Использование переменных — достаточно удобное средство для создания гибких или, скажем, динамичных страниц, когда содержимое HTML-документа может изменяться в зависимости от состояния того или иного элемента.

Усложнение кода

Предположим, нам необходимо изначально определить имя и пол пользователя и в зависимости от этого поместить сообщение приветствия. Для этой цели мы будем сочетать форму стандарта CGI и CFML.

Создадим новую CFML-страницу с именем welcome_flex.cfm и напишем соответствующий код (листинг 6.2).

Листинг 6.2. Код страницы welcome_flex.cfm

<HTML> <HEAD>

<МЕТА name="Author" content="Ruben Akhayan">

<META http-equiv="Description" content="The advanced code">

<META http-equiv="Keywords" content="ColdFusion,CFML,Book">

<TITLE>Welcome</TITLE>

</HEAD>

<BODY>

<!--- Проверка на наличие переменных --->

<CFIF isDefinedC'Form.FirstName") AND isDefinedf"Form.Gender")>

<STRONG>Welcome!</STRONG>

<!--- Установка переменной Appeal --->

<CFIF #Form.Gender* eq "f">

<CFSET Appeal="Ms."> <CFELSE>

<CFSET Appeal="Mr."> </CFIF>

<! -- - Вывод на" экран--->

<CFOUTPUT>

Dear #Appeal# #Form.FirstName#, thank you for your interest

in CFML. </CFOUTPUT> <CFELSE>

<!---Скрипт, для контроля ввода данных--->

<script>

function IsEmpty(data){

if(data.length==0)return true;

else return false;

}

function IsVerification(){

if(IsEmpty(document.forml.FirstName.value))

alert("Please, enter your Name!"); return false; } }

</script>

< ! --- Форма для ввода данных --- >

<FORM action='welcome_flex.cfra' method='post' name=' forml'

onSubmit= ' return IsVerification ( ) ; ' >

<TABLE border='0' cellspacing='5' cellpadding=' 0 '>

<TR><TD align="center" colspan="2">

Please, fill in the data on itself !</TD></TR>

<TR><TD colspan.;="2">&nbsp;</TD></TR>

<TR><TD align="right">First Name:</TD>

<TD><input name=' FirstName' size=' 17 '></TD></TR>

<TR><TD al ign= " right " >Gender : < /TD>

<TD><select name=' Gender '>

<option value="m">male <option value="f ">female </select> </TD></TR>

<TR><TD colspan="2">&nbsp;</TD></TR>

<TR><TD align="right">

<input type= ' submit ' value='Send'></td><td>

<input type=' reset' value= ' Clear '></td></tr> /TABLE>

</FORM>

</CFIF>

</BODY>

</HTML>

Теперь разберем, что происходит на этой странице, уже не рассматривая CFML-комментарии и классические HTML-теги (табл. 6.3).

Таблица 6.3. Описание кода страницы welcomejlex.cfm

Код

Описание

<CFIF isDefinedC'Form.FirstName") AND isDefined ( "Form. Gender" )>

Включаем тег <CFIF> условного оператора для проверки наличия переменных FirstName и Gender. Если переменные определены, тогда в HTML-страницу помещается код, расположенный ниже вплоть до раздела <CFELSE>

<CFIF # Form. Gender! eq "f"> <CFSET Appeal="Ms. "> <CFELSE> <CFSET Appeal="Mr . "> </CFIF>

Создаем переменную обращения к пользователю с именем Appeal и задаем значение в зависимости от пола

<CFOUTPUT>

Dear tAppeall #Form. FirstName#, thank you for your interest in CFML .

</CFOUTPUT>

Выводим на экран сообщение приветствия, включая значения переменных Appeal И FirstName

<CFELSE>

Раздел тега . условного оператора <CFIF>, "Иначе". Если не выполняется условие оператора, тогда в HTML-страницу помещается код, расположенный ниже и до раздела окончания тега оператора <CFIF>

<script> function IsEmpty (data)

{ if (data. length==0) return true; else return false; }

function IsVerification ( )

{

if (IsEmpty (document. forml. FirstName. value) )

{

alert ("Please, enter your Name!");

return false; } } </script>

Формируем сценарий для контроля ввода данных в регистрационной форме. В нашем случае предполагаем, что поле FirstName является обязательным, и нельзя допустить пустого значения. При несоблюдении данного правила выводим сообщение с текстом "Please, enter your Name!" (Пожалуйста, введите Ваше имя!)

 

Код

Описание

<FORM action= 'welcome flex.cfm" method= 'post ' name=' forml ' onSubmit= ' return IsVerif ication ( ) ; ' >

<TABLE border='0' cellspacing= ' 5 ' cellpadding= ' 0 '>

<TR><TD align="center" colspan="2">

Please, fill in the data on itself !</TD></TR>

<TR><TD colspan="2"> &nbsp;</TDX/TR>

<TRXTD align="right"> First- Name: </TD>

<TD><input name=' FirstName' size=' 17 '></TD></TR>

<TR><TD align="right"> Gender: </TD>

<TDXselect name=' Gender '> <option value="m">male <option value="f ">female </select> </TD></TR>

<TR><TD colspan="2"> Snbsp; </TD></TR>

<TR><TD align="right">

<input type= ' submit ' value= ' Send ' ></tdxtd>

<input type=' reset'value= ' Clear ' ></TD></TR>

</TABLE> </FORM>

Предлагаем пользователю ввести данные о себе — имя и пол, используя форму стандарта CGI. Надо заметить, что при выполнении команды отправки сведений мы обращаемся к этой же странице welcomejlex.cfm. Однако включенный в страницу условный оператор, проверяющий наличие переменных FirstName и Gender, ИЗ-бавит пользователя от повторной регистрации. В чем, собственно говоря, и заключается изюминка (рис. 6.4)

</CFIF>

Конец тега <CFIF> условного оператора

Рассмотрим код страницы welcome_flex.cfm в виде HTML при первом посещении (листинг 6.3) и после регистрации (листинг 6.4).

Листинг 6.3. Код страницы welcome_flex.cfm при первом посещении

<HTML>

<HEAD>

<МЕТА name="Author" content="Ruben Akhayan"> <META http-equiv="Description" content="The advanced code"> <META http-equiv="Keywords" content="ColdFusion,CEML,Book"> <TITLE>Welcome</TITLE> </HEAD> <BODY> <script>

function IsEmpty(data){

if(data.length==0)return true; else return false;

function IsVerificationO(

if(IsEmpty(document.forml.FirstName.value))

{ alert("Please, enter your Name!");

return false; } }

</script>

<FORM action='welcome_flex.cfm' method='post ' name=' forml'

onSubmit= ' return IsVerif ication ( ) ; ' >

<TABLE border='0' cellspacing=' 5' cellpadding=' 0 '>

<TR><TD align="center" colspan="2">

Please, fill in the data on itself !</TD></TR>

<TR><TD colspan="2">&nbsp;</td></tr>

<TR><TD align="right">First Name:</td>

<TD><input name=' FirstName' size=' 17 '></TD></TR>

<TR><TD align="right">Gender : </TD>

<TD><select Ъате= ' Gender '>

<option value="m">male <option value="f ">female </select> </TD></TR>

<TR><TD colspan="2">&nbsp; </TD></TR>

<TR><TD align="right">

<input type= 'submit' value='Send'></TD>

<TD> <input type=' reset' value=' Clear ' ></TD></TR>

</TABLE> </FORM> </BODY> </HTML>

Листинг 6.4. Код страницы welcome_flex.cfm после регистрации

<HTML>

<HEAD>

<META name="Author" content="Ruben Akhayan">

<META http-equiv="Description" content="The advanced code">

<META http-equiv="Keywords" content="ColdFusion, CFML, Book">

<TITLE>Welcome</TITLE>

</HEAD>

<BODY>

<STRONG>Welcome ! </STRONG>

Dear Mr. Robinson, thank you for your interest in CFML.

</BODY> </HTML>

Поставленную задачу можно также решить, используя две CFML-страницы. Для чего содержимое страницы welcome_flex.cfm разобьем на два файла: welcome_form.cfm (листинг 6.5) и welcoine_go.cfm (листинг 6.6), где файл welcome_form.cfm будет представлять собой непосредственно форму ввода данных, а файл \velcome_go.cfm — приемник данных с последующим выводом на экран сообщения приветствия.

Листинг 6.5. Код страницы welcome_form.cfm

<HTML> <HEAD>

<МЕТА name="Author" content="Ruben Akhayan">

<TITLE>Welcome</TITLE>

< ! --- Сценарий для контроля ввода данных --- >

<script>

function IsEmpty (data) {

if (data. length==0) return true; else return false; }

function IsVerification () {

if (IsEmpty (document . forml. Fir stName. value) }

{ alert ("Please, enter your Name!"}; return false;

</script> </HEAD> <BODY>

<! --- Форма для ввода данных --- >

<FORM action='welcome_go.cfm' method='post' name= ' forml '

onSubmit= ' return IsVerification () ; '>

<TABLE border='0' cellspacing=' 5' cellpadding=' 0' >

<TR><TD align="center" colspan="2">

Please, fill in the data on itself ! </TD></TR>

<TR><TD colspan="2">&nbsp;</td></tr>

<TR><TD align="right">First Name:</td>

<TD><input name='FirstName' size='17'></TD></TR>

<TR><TD align="right">Gender:</TD>

<TD><select name='Gender'>

<option value="m">male

<option value="f">female </select> </TD></TR>

<TR><TD colspan="2">&nbsp;</TD></TR>

<TR><TD align="right">'

<input type='submit' value='Send'></td>

<td> <input type='reset' value=' Clear'></td></tr> </TABLE>

</FORM> </BODY> </HTML>

Листинг 6.6. Код страницы welcome_go.cfm

<HTML> <HEAD>

<META name="Author" content="Ruben Akhayan">

<TITLE>Welcome</TITLE> </HEAD> <BODY>

<!--- Проверка наличия переменных --->

<CFIF isDefined("Form.FirstName")

AND isDefined("Form.Gender")> <STRONG>Welcome!</STRONG>

<!--- Установка переменной Appeal --->

<CFIF #Form.Gendertt eq "f">

<CFSET Appeal="Ms."> <CFELSE>

<CFSET Appeal="Mr."> </CFIF> <!---Вывод на экран--->

<CFOUTPUT>

Dear #Appeal# #Form.FirstNamett, thank you for your interest in CFML.

<CFELSE>

<!--- Данные не определены, отправляем на форму ввода данных --->

<МЕТА HTTP-EQUIV="Refresh" CONTENT="0;

URL=welcome_form.cfm"> </CFIF>

</BODY> </HTML>

В качестве примечания отметим, что страницу welcome_form.cfm можно смело преобразовать в HTML-формат, предварительно убрав комментарии CF, например, в welcome_form.html. Только в этом случае надо не забыть изменить ссылку на странице welcome_go.cfm, с welcome_form.cfm на welcome_form.html. Дело в том, что в коде данной страницы установлен переход на форму ввода данных при условии их отсутствия, что достаточно удобно для избежания ошибок и соблюдения следующего условия — регистрационная карта должна быть заполнена.

Резюме

Подведем итог. В данной главе мы познакомились и использованием CFML-тегов <CFSET>, <CFOUTPUT>, <CFIF>/<CFELSE>, функцией isDefined и оператором eq.